<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <link rel="stylesheet" href="css/style.css" />
    <title></title>
    <style>

        .div2{width:100px;height:30px;}

        .div3{position:absolute;
            z-index:1;
            float:left;
            margin-left:100px;
            background:#fff}

        .div2:hover>.div3{
            z-index:2;
        }

    </style>

    <ul><!--div1，在这里没毛用-->

        <li class="div2">番茄

            <ul class="div3" style="margin-top:-30px">

                <li>番茄1</li>

                <li>番茄2</li>

            </ul>

        </li>

        <li class="div2">白菜

            <ul class="div3" style="margin-top:-60px">

                <li>白菜1</li>

                <li>白菜2</li>

            </ul>
        </li>

    </ul>

</head>
<body>
</body>
</html>

